<template>
	<view class="assistant">
		<base-header height="400">
			<base-navbar back-color="#fff">
				<view class="header" :style="{color: '#fff'}">
					<view class="total">
						<text class="label">今日收益</text>
						<text class="money">￥{{ totalIncome }}</text>
					</view>
					<view class="cell-item">
						<view class="cell-item-content" @click="pageRoute('/pages/merchant/amount?is_refund=0')">
							<text class="label">收款笔数</text>
							<text class="num">{{ receiptNum }}</text>
						</view>
						<view class="cell-item-content">

						</view>
						<view class="cell-item-content" @click="pageRoute('/pages/merchant/member')">
							<text class="label">会员人数</text>
							<text class="num">{{ memberTotal }}</text>
						</view>
					</view>
				</view>
			</base-navbar>
		</base-header>
		<view class="content">
			<view class="menu-list">
				<view class="menu-item" v-for="(item, index) in appFeature" :key="index">
					<navigator v-if="item.link" :url="item.link">
						<image class="icon" :src="item.icon" mode="aspectFill"></image>
						<view class="label">{{ item.name }}</view>
					</navigator>
					<view v-else-if="item.action=='scan'" @click="scan">
						<image class="icon" :src="item.icon" mode="aspectFill"></image>
						<view class="label">{{ item.name }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import checkLogin from '@/utils/login';
	import {
		ref,
		reactive,
		toRefs,
		inject
	} from 'vue';
	import {
		onLoad,
		onShow,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';

	const state = reactive({
		themeColor: JSON.parse(cache.get('themeColor')),
		totalIncome: '0.00',
		receiptNum: '0',
		memberTotal: '0',
		appFeature: [],
		permission: []
	});

	onLoad((opt) => {
		initData();
	});

	onShow(() => {});

	onPullDownRefresh((e) => {
		console.log("下拉刷新", e);
	});

	onReachBottom((e) => {
		console.log("上拉加载更多", e);
	});

	function initData() {
		request.get('assistant/index').then(res => {
			// console.log('商家中心', res);
			state.totalIncome = res.data.totalIncome;
			state.receiptNum = res.data.receiptNum;
			state.memberTotal = res.data.memberTotal;
			state.permission = res.data.permission;
			state.appFeature = res.data.permission.app_feature;
		})
	}

	//扫码核销
	function scan() {
		console.log('扫码核销');
	}

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	};

	function pageTabRoute(url) {
		uni.switchTab({
			url
		});
	};

	const {
		themeColor,
		totalIncome,
		receiptNum,
		memberTotal,
		appFeature,
		permission,
	} = toRefs(state);
</script>

<style lang="scss">
	.assistant {
		.header {
			@include f-center(column);

			.total {
				padding-top: $m24;
				display: flex;
				flex-wrap: wrap;
				flex-direction: column;
				align-items: center;
				justify-content: center;
			}

			.label,
			.money,
			.num {
				color: $u-reverse-color;
			}

			.label {
				font-size: $font-24;
			}

			.money {
				font-size: $font-64;
				font-weight: bold;
			}

			.num {
				font-size: $font-48;
				font-weight: bold;
			}

			.cell-item {
				@include f-center();
				width: 100%;
				padding-top: $m24;

				.cell-item-content {
					// width: 30%;
					// padding-top: $m24;
					padding-left: $m64;
					padding-bottom: $m24;
					display: flex;
					flex-wrap: wrap;
					flex-direction: column;
					align-items: center;
					justify-content: center;
				}
			}
		}

		.content {
			// margin-top: -120rpx;
			// padding: $m24;

			.card {
				overflow: hidden;
				background-color: $u-bg-reverse-color;
				margin-bottom: $m24;
				border-radius: $radius-12;
			}

			.contact {
				@include f-center;
				font-size: $font-32;
				color: $u-main-color;
			}

			.navigator {
				display: flex;
				justify-content: center;
				flex-direction: column;
				align-items: center;
			}

			.menu-list {
				display: flex;
				flex-wrap: wrap;
				padding: $margin-12 0;

				.menu-item {
					@include f-center($direction: column);
					flex: 0 0 33.33%;
					padding: $margin-12 0;

					.icon {
						width: 90rpx;
						height: 90rpx;
						border-radius: $radius-12;
						background-color: $bg-color;
					}

					.label {
						margin-top: $margin-12;
						font-size: $font-24;
						color: $content-color;
					}
				}
			}
		}
	}
</style>